<template>
    <div id="userinfo" class="flex flex-v flex-align-center">
        <main-header></main-header>
        <div class="body-card">
            <div class="head-title">
                <h1>个人资料</h1>
            </div>
            <div class="body-content flex flex-v">
                <el-row>
                    <el-col :span="4"><div class="grid-content">头像</div></el-col>
                    <el-col :span="16">
                        <div class="grid-content">
                            <img class="avatar" src="@/static/images/avatar.jpg"/>
                        </div>
                    </el-col>
                    <el-col :span="4"><div class="grid-content"></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content">用户名</div></el-col>
                    <el-col :span="14"><div class="grid-content"><el-input v-model="form.username" type="text" placeholder="请输入你的用户名"></el-input></div></el-col>
                    <el-col :span="6">
                        <div class="grid-content blue-font edit-btn">
                            <i class="el-icon-edit"></i>修改
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content">职位</div></el-col>
                    <el-col :span="14"><div class="grid-content"><el-input v-model="form.website" type="text" placeholder="请输入你的职位"></el-input></div></el-col>
                    <el-col :span="6">
                        <div class="grid-content blue-font">
                            <i class="el-icon-edit"></i>修改
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content">公司</div></el-col>
                    <el-col :span="14"><div class="grid-content"><el-input v-model="form.bio" type="text" placeholder="请输入你的公司"></el-input></div></el-col>
                    <el-col :span="6">
                        <div class="grid-content blue-font">
                            <i class="el-icon-edit"></i>修改
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content">个人介绍</div></el-col>
                    <el-col :span="14"><div class="grid-content"><el-input v-model="form.url" type="text" placeholder="请输入你的个人介绍"></el-input></div></el-col>
                    <el-col :span="6">
                        <div class="grid-content blue-font">
                            <i class="el-icon-edit"></i>修改
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content">个人主页</div></el-col>
                    <el-col :span="14"><div class="grid-content"><el-input v-model="form.tagline" type="text" placeholder="请输入你的个人主页"></el-input></div></el-col>
                    <el-col :span="6">
                        <div class="grid-content blue-font">
                            <i class="el-icon-edit"></i>修改
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import MainHeader from '~/components/mainHeader.vue'
import {mapGetters} from 'vuex'
export default {
    head: {
      title: "个人中心"
    },
    components: {
        MainHeader
    },
    data() {
      return {
          form: {
              avatar_normal: '',
              username: '',
              website: '',
              bio: '',
              url: '',
              tagline: ''
          }
      }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        this.form = this.userInfo
    },
    methods: {
    }
}
</script>

<style lang="scss" scope>
@import "../../assets/styles/base";
#userinfo {
    background-color: $backgroundColor;
    height: 100vh;
    .body-card {
        width: 50%;
        background-color: $whiteColor;
        margin: 50px 0;
        border-radius: 5px;
        padding: 40px 30px;
    }
    .head-title {
        margin-bottom: 20px;
        h1 {
            font-size: 20px;
            font-weight: bold;
            margin: 20px 0;
        }
        border-bottom: 1px solid $backgroundColor;
    }
    .body-content {
        .el-row {
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid $backgroundColor;
            font-size: 14px;
            color: #333333;
            &:last-child {
                border-bottom: none;
            }
            input {
                width: 300px;
            }
            .avatar {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                border: 1px solid $backgroundColor;
                cursor: pointer;
            }
            .edit-btn {
                cursor: pointer;
            }
        }
    }
}
</style>
